<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Point Cloud Visualization</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f5f5f5;
      }
      .container {
        max-width: 1000px;
        margin: 0 auto;
        background-color: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
      }
      .header {
        margin-bottom: 30px;
        border-bottom: 2px solid #007bff;
        padding-bottom: 20px;
      }
      .header h1 {
        color: #333;
        margin: 0;
      }
      .header p {
        color: #666;
        margin: 10px 0 0 0;
      }
      .btn {
        display: inline-block;
        background-color: #007bff;
        color: white;
        padding: 15px 30px;
        text-decoration: none;
        border-radius: 8px;
        font-size: 18px;
        margin: 20px 0;
        transition: background-color 0.2s;
      }
      .btn:hover {
        background-color: #0056b3;
      }
      .solution-box {
        background-color: #e8f5e8;
        border: 1px solid #28a745;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
      }
      .solution-box h3 {
        color: #28a745;
        margin-top: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>🎯 3D Point Cloud Interactive Visualization</h1>
      </div>

      <a href="pointcloud_3d.html" class="btn"
        >🌐 Open 3D Point Cloud Visualization</a
      >

      <div
        style="
          margin-top: 40px;
          padding: 20px;
          background-color: #f8f9fa;
          border-radius: 8px;
          text-align: center;
        "
      >
        <h3>💡 Usage Instructions</h3>
        <p>
          Click the button above to open the 3D visualization page and use mouse
          for interactive operations:
        </p>
        <ul
          style="
            display: inline-block;
            text-align: left;
            margin: 0;
            padding-left: 20px;
          "
        >
          <li>Drag: Rotate view</li>
          <li>Scroll wheel: Zoom</li>
          <li>Right-click drag: Pan</li>
          <li>Hover: View point coordinates</li>
        </ul>
      </div>
    </div>
  </body>
</html>
